<template>
  <div>
    <h4>发表评论--{{newsid}}</h4>
    <hr />
    <textarea placeholder="请输入要BB的内容（最多输入120字）" maxlength="120"
    v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>

    <!-- 评论列表区 -->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item,i) in cmtlist" :key=i>
        <div class="cmt-item-tittle">第{{i+1}}楼&nbsp;标题：{{item.title}}&nbsp;发表时间:{{item.time|dateFormat("YYYY-MM-DD")}}</div>
        <div class="cmt-item-body">{{item.content}}</div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain>加载更多</mt-button><!-- 加载更多vue175集  （拼接的时候用concat（下面）） -->

  </div>
</template>

<script>
// 按需从MintUI中，导出需要的弹框组件
import {Toast} from "mint-ui";
export default {
  data() {
    return {
        cmtlist:[],//评论数组
        msg:""//即将发布的评论内容
    };
  },
  created() {
      this.getCommentBypage()
  },
  methods: {
      async getCommentBypage(){
        //根据页数来获取评论的数据
        const{data}=await this.$http.get("/getBuildList")
        console.log(data);
        if(data.status==0)return this.cmtlist=data.data;
            // return (this.cmtlist=this.cmtlist.concat(data.data))

      },
      async postMsg(){
        //   点击发表评论
        // 如果用户没有填写评论内容，则阻止其发布内容(trim去掉首尾空格)
        if(this.msg.trim().length<=0)return Toast("请填写评论内容")

        // 发表评论的逻辑
        const {data} =await this.$http.post("BuildList",{
            content:this.msg,
            title:"baby",
            img:""
            })
        if(data.status==0){
            // 刷新评论内容
            // 再次调用getCommentByPage()
            // 获取评论之前，先把之前所有的评论清空
            // this.cmtlist=[];
            // this.getCommentBypage()
            // 为了防止重新调用getCommentBypage()方法的时候，会把之前的所有评论清空的问题
            // 我们在在护短手动拼接处一个评论的对象，并把这个评论对象 unshift到cmtlist中
            this.cmtlist.unshift({
                user_name:"匿名用户",
                add_time:new Date(),
                content:this.msg.trim()
            })
            this.msg=""
            console.log(data);

        }
      }
  },
  props:["newsid"]//接受父组件传递过来的newsid
};
</script>

<style scoped>
textarea {
  font-size: 14px;
}
.cmt-list {
  margin-top: 4px;
}
.cmt-list .cmt-item {
  line-height: 30px;
}
.cmt-list .cmt-item .cmt-item-tittle {
  background-color: rgb(131, 131, 131);

  font-size: 14px;
}
.cmt-list .cmt-item .cmt-item-body {
  font-size: 13px;
  text-indent: 2em;
}
</style>